<template>
  <div class="sku">
    <el-table :data="productList">
      <el-table-column prop="skuName" label="名称" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column label="默认图片">
        <template #default="{ row }">
          <img :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" />
      <el-table-column prop="price" label="价格" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            :type="row.isSale ? 'success' : 'info'"
            :icon="row.isSale ? 'bottom' : 'top'"
            circle
            @click="upSale(row.spuId, row.isSale)"
          />
          <el-button type="primary" icon="Edit" circle @click="editSku" />
          <el-button
            type="info"
            icon="InfoFilled"
            circle
            @click="skuInfo(row.spuId)"
          />
          <el-button
            type="danger"
            icon="Delete"
            circle
            @click="deletSku(row.spuId)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="setFristProduct.page"
      v-model:page-size="setFristProduct.limit"
      :page-sizes="[1, 5, 10, 15]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="limitChange"
      @current-change="currentPageChange"
    />
  </div>
  <!-- 查看SKU -->
  <el-drawer v-model="drawer">
    <template #header>
      <h4>查看商品的详情</h4>
    </template>
    <template #default>
      <el-row style="margin: 10px 0px">
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuInfoList.skuName }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0px">
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuInfoList.skuDesc }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0px">
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuInfoList.price }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0px">
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            style="margin: 5px"
            v-for="item in skuInfoList.skuAttrValueList"
            :key="item.id"
          >
            {{ item.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row style="margin: 10px 0px">
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            style="margin: 5px"
            v-for="item in skuInfoList.skuSaleAttrValueList"
            :key="item.id"
          >
            {{ item.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row style="margin: 10px 0px">
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item
              v-for="item in skuInfoList.skuImageList"
              :key="item.id"
            >
              <img
                :src="item.imgUrl"
                alt=""
                style="width: 100%; height: 100%"
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
/* 导入TS类型 */
import type { resProduct, records, resSkuInfo } from '@/apis/goods/sku/skuTypes'
/* 导入SKU模块接口 */
import {
  getProductListAPI,
  reqSaleAPI,
  cancelSaleAPI,
  deletSkuAPI,
  skuInfoAPI,
} from '@/apis/goods/sku/index'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
/* 定义获取初始化数据 对象*/
const setFristProduct = reactive<any>({
  page: 1 /* 当前页 */,
  limit: 10 /* 每页信息条数 */,
})
/* 存储SKU数据 */
const productList = ref<records[]>([])
/* 数据天数 */
const total = ref<number>()
/* 控制查看SKU信息的开关 */
const drawer = ref(false)
/* 查看商品信息存储数据 */
const skuInfoList = ref<any>({})
/* 获取初始化信息 */
const getProductList = async (setFristProduct: any) => {
  const { data: res }: resProduct = await getProductListAPI(setFristProduct)
  /* 对数据进行校验 */
  if (res.code !== 200) ElMessage.error('获取失败')
  productList.value = res.data.records
  total.value = res.data.total
}
/* 在页面开始渲染时发起请求 */
onMounted(() => getProductList(setFristProduct))
/* 当每页显示条数发生变化时触发 */
const limitChange = (val: number) => {
  setFristProduct.limit = val
  getProductList(setFristProduct)
}
/* 当当前页数发生变化时触发 */
const currentPageChange = (val: number) => {
  setFristProduct.page = val
  getProductList(setFristProduct)
}
/* 商家与下架时触发 */
const upSale = async (spuId: number, isSale: any) => {
  /* 判断该商品是否已经上架 */
  if (isSale) {
    /* 已经上架 执行下架业务 */
    const { data: res }: any = await cancelSaleAPI(spuId)
    if (res.code != 200) ElMessage.error('下架失败')
    ElMessage.success('下架成功')
    getProductList(setFristProduct)
  } else {
    /* 位上架 执行上架业务 */
    const { data: res }: any = await reqSaleAPI(spuId)
    if (res.code != 200) ElMessage.error('上架失败')
    ElMessage.success('上架成功')
    getProductList(setFristProduct)
  }
}
/* 编辑SKU */
const editSku = () => {
  ElMessage.warning('服务器正在加赶进度业务马上完成')
}
/* 查看信息 */
const skuInfo = async (spuId: number) => {
  drawer.value = true
  const { data: res }: resSkuInfo = await skuInfoAPI(spuId)
  if (res.code != 200) ElMessage.error('查看失败')
  skuInfoList.value = res.data
}
/* 删除SKU */
const deletSku = async (spuId: number) => {
  const { data: res }: any = await deletSkuAPI(spuId)
  if (res.code != 200) ElMessage.error('系统数据不能删除')
}
</script>

<style lang="scss" scoped>
img {
  width: 200px;
  height: 150px;
}
.el-pagination {
  margin: 30px 0;
}
</style>
